// 获取id元素
function id(id) {
    return document.getElementById(id);
}
window.onload = function () {
    var left = id("left");
    var right = id("right");
    var index = 0;
    var timer = null;
    var pic = id("pic").getElementsByTagName("li");
    var div = id("banner-box");
    var num = id("num").getElementsByTagName("li");

    // 下一页
    right.onclick = function () {
        index++;
        if (index >= pic.length) {
            index = 0;
        }
        change(index);
    }
    // 上一页
    left.onclick = function () {
        index--;
        if (index < 0) {
            index = pic.length - 1;
        }
        change(index);
    }
    // 鼠标移入时停止定时器
    div.onmouseover = function () {
        clearInterval(timer);
    }
    //鼠标移出后4秒重新开始定时器
    div.onmouseout = function () {
        timer = setInterval(run, 4000);
    }

    //定时器 每隔4秒执行一次
    timer = setInterval(run, 4000);

    //用于定时器的函数
    function run() {
        index++;
        if (index >= pic.length) {
            index = 0;
        }
        change(index);
    }

    for (var i = 0; i < num.length; i++) {
        num[i].index = i; //把索引值存起来
        num[i].onmouseover = function() {
            change(this.index);
        }
    }

    //用于切换图片的函数
    function change(curindex) {
        for (var i = 0; i < pic.length; i++) {
            pic[i].style.display = "none";
            num[i].className = "";
        }
        pic[curindex].style.display = "block";
        num[curindex].className = "active";
        index = curindex;
    }
}